<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <link href="/static/dist/lib/uploader/zui.uploader.min.css" rel="stylesheet">
    <script src="/static/dist/lib/uploader/zui.uploader.min.js"></script>
    <script src="/static/dist/lib/sortable/zui.sortable.min.js"></script>
    <style>
        /* 为可拖动的条目应用可移动光标类型 */
        #sortableList > .list-group-item {cursor: move}

        /* 为正在被拖动的条目应用半透明外观 */
        #sortableList > .list-group-item.dragging {
            visibility: visible;
            opacity: .3;
        }
    </style>
    <div class="toolbar-row">
        <div class="btn-toolbar">
            <div class="btn-group">
                <button class="btn album_add_btn"><i class="icon icon-plus"></i><span>添加图片</span></button>
                <button class="btn album_add_edit"><i class="icon icon-edit"></i><span>编辑</span></button>
                <button class="btn album_add_del"><i class="icon icon-trash"></i><span>移除</span></button>
            </div>
        </div>
    </div>

    <!-- 使用data-remote属性 -->
    <button type="button" class="btn btn-primary" data-remote="/admin/activity/album/upload/${album.id}" data-toggle="modal">Ajax对话框</button>

    <hr>
    <div class="list-row">
        <div class="cards">
            <c:forEach var="f" items="${files}" varStatus="status">
                <!-- 分组图片浏览 -->
                <%--<div class="col-md-4 col-sm-6 col-lg-3">${f}--%>

                <%--&lt;%&ndash;<!-- 使用按钮 -->&ndash;%&gt;--%>
                <%--&lt;%&ndash;<a href="${f.fileNeturl}" data-toggle="lightbox" class="btn btn-primary">浏览图片</a>&ndash;%&gt;--%>
                <%--&lt;%&ndash;<!-- 使用图片 -->&ndash;%&gt;--%>
                <%--&lt;%&ndash;<img data-toggle="lightbox" src="${f.fileNeturl}" data-image="${f.fileNeturl}" data-caption="小图看大图" class="img-thumbnail" alt="" width="200">&ndash;%&gt;--%>

                <%--</div>--%>
                <div class="col-md-4 col-sm-6 col-lg-3 sortable-item">
                    <a class="card" href="###">
                        <div class="media-wrapper">
                            <img src="${f.fileNeturl}" data-toggle="lightbox" data-image="${f.fileNeturl}" data-caption="小图看大图" class="img-thumbnail" />
                        </div>
                        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
                        <div class="card-heading"><strong>良辰美景A</strong></div>
                        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
                        <div class="card-actions">
                            <span class="label label-warning">牡丹亭</span>
                            <div class="pull-right"><i class="icon-comments-alt"></i> 520</div>
                            <div class="pull-right text-danger" style="padding-right: 5px;"><i class="icon-heart-empty"></i> 520</div>
                        </div>
                        <div class="card-actions">
                            <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button>
                            <%--<div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div>--%>
                        </div>
                    </a>
                </div>
            </c:forEach>
        </div>
    </div>

    <script type="application/javascript">

        $(function () {
        });

    </script>
</div>
</body>
</html>